<template>
  <div class="service">
    <PageHead title="服务" :border-bottom="false" @back="goBack">
      <img :src="morePng" width="30" />
    </PageHead>
    <div class="service-content mt-12 px-16">
      <div class="inner flex justify-around align-center text-white gc-12">
        <div class="item">
          <div class="text-center">
            <img :src="payPng" width="32" />
          </div>

          <div class="text-14 text-bolder mt-6">收付款</div>
        </div>
        <div class="item" @click="openWallet">
          <div class="text-center">
            <img :src="walletPng" width="32" />
          </div>
          <div class="text-14 text-bolder mt-6">钱包</div>
          <div class="money">￥{{ store.pocketMoney.toFixed(2) }}</div>
        </div>
      </div>
    </div>

    <section class="px-16 mt-8 flex flex-col gr-4">
      <div
        v-for="(item, key) in serviceList"
        :key="key"
        class="service-section"
      >
        <div class="text-999 mb-16">{{ item.title }}</div>
        <ul class="life-card">
          <li v-for="(m, n) in item.list" :key="n" class="text-center">
            <div>
              <img :src="m.img" width="28" />
            </div>
            <div>{{ m.title }}</div>
          </li>
        </ul>
      </div>
    </section>
    <Wallet></Wallet>
  </div>
</template>

<script setup lang="ts">
  import PageHead from '@/views/components/page-head/PageHead.vue';
  import morePng from '@/assets/images/more.png';
  import { computed } from 'vue';
  import { getUserStore } from '@/store/user/utils';
  import payPng from '../assets/pay.png';

  import walletPng from '../assets/wallet.png';
  // eslint-disable-next-line import/no-cycle
  import { goBack } from '../me/me';
  import { serviceList } from './service';
  import { showWallet } from '../wallet/wallet';
  import Wallet from '../wallet/Wallet.vue';

  const openWallet = () => {
    setTimeout(() => {
      showWallet.value = true;
    }, 300);
  };

  const store = computed(() => {
    return getUserStore().master;
  });
</script>

<style lang="scss" scoped>
  @import './service';
</style>
